<template>
    <el-container>
        <el-dialog style="height: 100vh" title="数据删除" :visible.sync="dialogFormVisibleRemove" :append-to-body="true" @close="$router.push({ name: 'LayerComponent' })">
            <el-scrollbar wrap-class="list" wrap-style="color: red; height:30vh;" view-class="view-box" view-style="font-weight: bold;height:100%;" :native="false"
                ><!--check-strictly-->
                <el-tree ref="tree1" :data="LayerTreeData" :props="defaultProps" default-expand-all show-checkbox check-strictly node-key="id" style="margin-bottom: 20px" @check-change="checkChange">
                </el-tree>
            </el-scrollbar>
            <!--check-strictly-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleRemove = false">取 消</el-button>
                <el-button type="primary" @click="deleteDataSave">删除</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<script>
import LayerManager from "@/plugins/mev/layer/LayerManager";
import loadJson from "@/plugins/utils/loadJson";
import Environment from "@/plugins/utils/environment";

export default {
    name: "ToolbarRemoveDataComponent",
    data() {
        return {
            LayerTreeData: [],
            dialogFormVisibleRemove: true,
            defaultProps: {
                children: "children",
                label: "name"
            }
        };
    },
    beforeDestroy() {},
    created() {
        this.getLayerData();
    },
    methods: {
        //获得图层对象
        getLayerData: function() {
            let that = this;

            this.LayerTreeData = LayerManager.getInstance().getLayerData();
            that.rootIds = [];
            that.LayerTreeData.forEach(function(item) {
                item.id = that.guid();
                that.rootIds.push(item.id);
            });
        },
        checkChange(data, checked, node) {
            if (checked === true) {
                if (this.checkedId === data.id) {
                    this.$refs.tree1.setCheckedKeys([]);
                } else {
                    this.checkedId = data.id;
                    this.$refs.tree1.setCheckedKeys([data.id]);
                }
            } else {
                if (this.checkedId === data.id) {
                    this.$refs.tree1.setCheckedKeys([data.id]);
                }
            }
        },
        //确定删除
        deleteDataSave: function() {
            let that = this;
            //删除前先判断该数据check是否为true,如果为true，先去图层管理取消勾选，再来删除。
            //从LayerTreeData删除勾选的数据
            //更新LayerManager.js中的_jsonData
            let data = that.LayerTreeData;
            if (that.rootIds.includes(that.checkedId)) {
                data.forEach(function(g, index1, arr1) {
                    if (g.id === that.checkedId) {
                        if (g.children.length === 0) {
                            arr1.splice(index1, 1);
                            that.$message({
                                showClose: true,
                                message: "删除成功",
                                type: "success"
                            });
                        } else {
                            that.$message({
                                showClose: true,
                                message: "请先删除子数据",
                                type: "warning"
                            });
                        }
                    }
                });
            } else {
                data.forEach(function(g) {
                    g.children.forEach(function(item, index, arr) {
                        if (item.id === that.checkedId) {
                            item.cesiumTreeData.setVisible(false);
                            arr.splice(index, 1);
                            that.$message({
                                showClose: true,
                                message: "删除成功",
                                type: "success"
                            });
                        }
                    });
                });
            }

            LayerManager.getInstance().updateJsonData(that.LayerTreeData);
        },
        guid: function() {
            return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
                let r = (Math.random() * 16) | 0,
                    v = c === "x" ? r : (r & 0x3) | 0x8;
                return v.toString(16);
            });
        }
    }
};
</script>

<style scoped></style>
